<template>
  <div class="craft-management">
    <h1>产品及工艺管理</h1>
    <el-tabs v-model="activeTab" @tab-change="onTabChange">
      <el-tab-pane label="产品列表" name="products">
        <product-list @view-process-route="switchToProcessRoute" />
      </el-tab-pane>
      <el-tab-pane label="工艺路线" name="processRoutes">
        <process-route-list ref="processRouteRef" @view-operations="switchToOperations" />
      </el-tab-pane>
      <el-tab-pane label="工序管理" name="operations">
        <operation-list ref="operationRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
// 确保组件路径正确
import ProductList from '@/components/ProductList.vue'; 
import ProcessRouteList from '@/components/ProcessRouteList.vue';
import OperationList from '@/components/OperationList.vue';
import { ElMessage } from 'element-plus';

const activeTab = ref('products');
const processRouteRef = ref(null);
const operationRef = ref(null);

// 标签页切换事件
const onTabChange = (tabName) => {
  console.log('切换到标签页:', tabName);
};

// 从产品列表切换到工艺路线
const switchToProcessRoute = (product) => {
  ElMessage.info(`切换到工艺路线页面，产品: ${product.productName}`);
  activeTab.value = 'processRoutes';
  
  // 等待组件渲染完成后设置产品ID
  nextTick(() => {
    if (processRouteRef.value && processRouteRef.value.setSelectedProduct) {
      processRouteRef.value.setSelectedProduct(product.productId);
    }
  });
};

// 从工艺路线切换到工序管理
const switchToOperations = (route) => {
  ElMessage.info(`切换到工序管理页面，工艺路线: ${route.routeName}`);
  activeTab.value = 'operations';
  
  // 等待组件渲染完成后设置搜索条件
  nextTick(() => {
    if (operationRef.value && operationRef.value.searchByRoute) {
      operationRef.value.searchByRoute(route.routeId);
    }
  });
};
</script>

<style scoped>
.craft-management {
  padding: 20px;
}

:deep(.el-tabs__content) {
  padding-top: 20px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.el-tabs__item.is-active) {
  color: #409eff;
}
</style>